<template>
  <div class="layout-page pb-32px">
    <NewsTop />
    <div class="layout-page-inner w-1328px">
      <el-breadcrumb :separator-icon="ArrowRight" class="my-16px">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="$route.query.type === 'intro'"
          to="/server/media"
          >产品服务</el-breadcrumb-item
        >
        <el-breadcrumb-item v-else to="/news">行业资讯</el-breadcrumb-item>
        <el-breadcrumb-item>资讯详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="w-full bg-white p-32px box-border">
        <div class="flex items-center justify-between mb-20px">
          <h1
            class="font-size-32px fw-500 lh-50px text-default flex-1 mr-100px"
          >
            {{ detail.infoTitle }}
          </h1>
          <span
            class="cursor-pointer py-9px px-20px font-size-14px subscribe"
            :class="{ 'is-subscribed': detail.userSubscribeStatus }"
            @mouseover="isSubscribeMouseOver = true"
            @mouseout="isSubscribeMouseOver = false"
            @click="toggleSubscribe"
            >{{ subscribeText }}</span
          >
        </div>
        <div class="text-light font-size-14px flex">
          <span class="mr-48px"
            >发布时间：{{ detail.createTime?.slice(0, 16) }}</span
          >
          <span class="mr-48px">作者：{{ detail.createBy }}</span>
          <span class="mr-48px"
            >资源来源：{{ NEWS_FROM_ENUM[detail.infoFrom] }}</span
          >
        </div>
        <div class="h-1px w-full bg-#d8d8d8 my-40px"></div>
        <div
          class="rich-content ql-editor"
          v-html="detail.infoDetailDesc"
        ></div>
        <div class="mt-32px" v-if="detail.attachFileUrl">
          <span>附件：</span>
          <span
            class="cursor-pointer file"
            @click="download(detail.attachFileName, detail.attachFileUrl)"
            >{{ detail.attachFileName }}</span
          >
        </div>
      </div>
      <div
        class="flex justify-between pt-32px flip"
        v-if="!route.query.hiddenFooter"
      >
        <span
          :class="{ disabled: !detail.lastId }"
          @click="goOtherNews(detail.lastId)"
          >上一篇：{{ detail.lastTitle || "无" }}</span
        >
        <span
          class="text-right"
          :class="{ disabled: !detail.nextId }"
          @click="goOtherNews(detail.nextId)"
          >下一篇：{{ detail.nextTitle || "无" }}</span
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import NewsTop from "./components/newsTop.vue";
import { NEWS_FROM_ENUM } from "@/const";
import { download } from "@/utils/dom";

const detail = ref({});

const isSubscribeMouseOver = ref(false);
const subscribeText = computed(() => {
  if (!detail.value.userSubscribeStatus) return "订阅";
  if (isSubscribeMouseOver.value) return "取消订阅";
  return "已订阅";
});

const $api = inject("$api");
const getDetail = async (id) => {
  const { data } = await $api.news.getDetail(id);
  detail.value = data;
};

const toggleSubscribe = async () => {
  const toggledStatus = detail.value.userSubscribeStatus === 1 ? 0 : 1;
  await $api.system.toggleSubscribe({
    infoType: detail.value.infoType,
    userSubscribeStatus: toggledStatus,
  });
  ElMessage.success(detail.value.userSubscribeStatus ? "取消成功" : "订阅成功");
  detail.value.userSubscribeStatus = toggledStatus;
};

const route = useRoute();
watch(
  () => route.query.id,
  (val) => {
    getDetail(val);
  },
  {
    immediate: true,
  }
);

const router = useRouter();
const goOtherNews = (id) => {
  if (!id) return;
  router.replace({
    name: "NewsDetail",
    query: { id },
  });
};
</script>

<style scoped lang="less">
.flip > span {
  max-width: 45%;
  .single-overflow;
  &:not(.disabled) {
    cursor: pointer;
    &:hover {
      color: @main-color;
    }
  }
}

.rich-content {
  :deep(img) {
    display: block;
    max-width: 100%;
    margin: 16px auto;
  }
}

.subscribe {
  background: @main-color;
  color: #fff;
  transition: opacity 0.1s linear;
  &:hover {
    opacity: 0.7;
  }
  &.is-subscribed {
    color: #1d2129;
    background: #f2f3f5;
  }
}

.file:hover {
  color: #0749f2;
}
</style>
